<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>遍历对象</title>
</head>
<body>
    
</body>
</html>
<script>
    //获取内容
    // const hd = {
    //     name : "后盾人",
    //     age : 10
    // };
    //获取对象的键
    // console.log(Object.keys(hd))
    // //获取对象的值
    // console.log(Object.values(hd));
    // //获取属性和值
    // console.log(Object.entries(hd));

    //for/in 遍历对象  主要是用作遍历键
    // for(let key in hd){
    //     console.log(key,hd[key])
    // }

    //for of 用于遍历迭代对象，不能直接操作对象
    
    //获取对象的所有键
    // for(const key of Object.keys(hd)){
    //     console.log(hd)
    // }

    //获取对象的所有值
    // for(const value of Object.values(hd)){
    //     console.log(value)
    // }

    //获取所有对象的属性名和值
    // for(const array of Object.entries(hd)){
    //     console.log(array)
    // }

    //使用扩展语法同时获取属性名和属性值
    // for(const [key,value] of Object.entries(hd)){
    //     console.log(value)
    // }


    //添加元素DOM练习
    let lessons = [
        {name:"js",click:23},
        {name:"node",click:192}
    ];
    let ul = document.createElement("ul");
    for(const val of lessons){
        let li = document.createElement("li");
        li.innerHTML = `课程${val.name}的点击数是${val.click}`;
        ul.appendChild(li);
    }
    document.body.appendChild(ul);

    
</script>